<!-- components/Header.vue -->
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { User, SwitchButton, ArrowDown} from '@element-plus/icons-vue'


const route = useRoute()
const router = useRouter()
// 跳转用户信息
const goUserProfile = () => {
  router.push({ name: 'user' })
}

// 随机头像
const randomImage = ref(`https://randomuser.me/api/portraits/thumb/men/${Math.floor(Math.random() * 100)}.jpg`)
// 退出登录处理
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',


  }).then(() => {
    // 调用退出登录方法
    router.push('/')
    sessionStorage.removeItem('admin');
    sessionStorage.removeItem('consultant');
    ElMessage.success('退出成功')
    sessionStorage.setItem('admin', null);
  })
}
</script>

<template>
  <el-page-header @back="() => router.go(-1)" style="margin-bottom: 20px;">
    <template #content>
      <div class="flex items-center">
        <span class="text-large font-600 mr-3"> {{ route.meta.title }} </span>
        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          {{ route.meta.description || '当前页面' }}
        </span>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-button type="primary" size="small" @click="router.push({ name: 'Home' })">
          返回首页
        </el-button>
        <el-tag type="success" style="margin:0 20px;">系统版本: v1.0.0</el-tag>
        <el-dropdown trigger="hover" placement="bottom-end">
          <div class="user-info-wrapper">
            <el-avatar :size="32" :src="randomImage" />
            <span class="username">用户名</span>
            <el-icon class="arrow-down"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goUserProfile">
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
    
  </el-page-header>
</template>

<style scoped>
.el-page-header {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;

}

.flex {
  display: flex;
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.text-large {
  font-size: 16px;
}

.font-600 {
  font-weight: 600;
}

.mr-3 {
  margin-right: 10px;
}

.text-sm {
  font-size: 14px;
}

.mr-2 {
  margin-right: 8px;
}

.user-info-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}

.username {
  margin: 0 8px;
  color: #333;
  font-size: 14px;
}

.arrow-down {
  color: #fff;
  font-size: 12px;
}
</style>